/**
 * @module 会员卡列表
 * @author xiongsha
 * @date 2021-01-07 17:25:47
 */
import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import HeaderComponent from '@src/pages/components/Header';
import request from '@src/utils/request.tsx';
import './index.less';

interface IDetail {
  begin_at?: string;
  end_at?: string;
  name?: string;
  nickname?: string;
  phone?: string;
  times?: string;
  url?: string;
}

const VipDetail: React.FC<RouteComponentProps> = (props: RouteComponentProps) => {
  const [detail, setDetail] = useState<IDetail>({});
  const id = (props.match.params as any).id;
  const getDetail = () => {
    // 获取详情
    request('get', `/api/v1/level_info/${id}`).then((res) => {
      if (res && res.code === 200) {
        setDetail(res.data);
      }
    });
  };
  useEffect(() => {
    getDetail();
  }, []);
  return (
    <div>
      <HeaderComponent text="会员卡"></HeaderComponent>
      <div className="vip-detail">
        <p className="title">会员卡详情</p>
        <ul>
          {detail.url ? (
            <li className="list">
              <span className="label">会员图片</span>
              <img className="vip-img" src={detail.url} alt="" />
            </li>
          ) : null}
          <li className="list">
            <span className="label">卡 名 称</span>
            <p>{detail.name}</p>
          </li>
          <li className="list">
            <span className="label">持 卡 人</span>
            <p>{detail.nickname}</p>
          </li>
          {detail.times ? (
            <li className="list">
              <span className="label">剩余次数</span>
              <p>{detail.times}</p>
            </li>
          ) : null}
          <li className="list">
            <span className="label">有效日期</span>
            <p>
              {detail.begin_at} - {detail.end_at}
            </p>
          </li>
          <li className="list">
            <span className="label">电 &nbsp; 话</span>
            <p>{detail.phone}</p>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default VipDetail;
